<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>css下拉</title>
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    nav{
        width: 100%;
        height: 50px;
        background-color:black;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    .nav{
        width: 1200px;
        height: 50px;
    }
    .xian{
        margin: 0;
    }
    .xian li{
        list-style: none;
        float: left;
        line-height: 50px;
        padding: 0 30px;
        position: relative;
    }
    .xian li a:hover{
        color: yellowgreen;
    }
    .xian li:hover .yin{
        opacity: 1;
    }
    .xian li a{
        color: white;
        text-decoration: none;
    }
    .yin{
        background-color: black;
        width: 80px;
        margin: 0;
        padding: 0;
        opacity: 0; 
        position: absolute;
    }
    .yin li{
        line-height: 30px;
        float: none;
        padding: 0 5px;
    }
    .yin li:hover{
        background-color: gray;
    }
    .aaa{
        width: 100%;
        height: 500px;
        background-color: pink;
    }
    </style>
</head>

<body>
    <nav>
       <div class="container nav">
           <ul class="xian">
               <li><a href="#" style="color:yellowgreen">会员首页</a></li>
               <li><a href="#">看电影</a>
                    <ul class="yin">
                        <li><a href="#">华语电影</a></li>
                        <li><a href="#">海外大片</a></li>
                    </ul>
                </li>
               <li><a href="#">看剧</a>
                    <ul class="yin">
                        <li><a href="#">英剧</a></li>
                        <li><a href="#">美剧</a></li>
                        <li><a href="#">港剧</a></li>
                        <li><a href="#">韩剧</a></li>
                    </ul>                    
                </li>
               <li><a href="#">看动漫</a></li>
               <li><a href="#">纪录片</a></li>
               <li><a href="#">德云社</a></li>
               <li><a href="#">看直播</a></li>
           </ul>
        </div> 
    </nav>
    <div class="aaa">

    </div>
</body>

</html>